<template>
  <div class="scroll" v-if="handleList.length">
    <div class="play-item1">
        <!-- 歌名 -->
        <div class="name" style="font-weight:bold">歌名</div>
        <!-- 右侧 -->
        <div class="right">
          <!-- 歌手 -->
          <div class="songer" style="font-weight:bold">歌手</div>
          <!-- 时长 -->
          <div style="font-weight:bold">其他</div>
        </div>
    </div>
    <template v-for="(item, index) in handleList" :key="index">
      <div class="play-item" @mouseenter="handleMouseenter(item)" @mouseleave="handleMouseleave(item)" @click="handleClick(item)">
        <!-- 歌名 -->
        <div class="name">{{ item.songName }}</div>
        <!-- 右侧 -->
        <div class="right">
          <!-- 歌手 -->
          <div class="songer">{{ item.songerName }}</div>
          <!-- 时长 -->
          <div v-if="item.showMore" class="duration">暂无</div>
          <!-- 显示其他 -->
          <div v-else>其他</div>
        </div>
      </div>
    </template>
  </div>
  <lay-empty v-if="!handleList.length" description="列表空空如也" style="color: #ccc"></lay-empty>
</template>

<script>
import { reactive, toRefs, watch } from 'vue'
import { useStore } from 'vuex'
export default {
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  setup(props) {
    const store =useStore()
    const _data = reactive({
      handleList: [],
      outIndex: null // 用来确定离场动画
    })
    watch(
      () => props.list.length,
      () => {
        _data.handleList = props.list.map(item => {
          return {
            ...item,
            showMore: true
          }
        })
      }
    )
    // 点击播放音乐 
    function handleClick(item){
      store.commit('playList/ADD_PLAYLIST',item)
    }

    // 鼠标进入
    function handleMouseenter(item) {
      item.showMore = false
    }
    // 鼠标离开
    function handleMouseleave(item) {
      item.showMore = true
    }
    return {
      ...toRefs(_data),
      handleMouseenter,
      handleMouseleave,
      handleClick
    }
  }
}
</script>

<style lang="scss" scoped>
.shanchu {
  color: #ccc;
  &:hover {
    cursor: pointer;
    color: $bar;
  }
}
.scroll {
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      background-color: #e3e3e3;
    }
    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      background: transparent;
      border-radius: 10px;
    }
    .play-item1 {
      position: relative;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      .mask {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 50px;
        z-index: 10;
      }
      .right {
        display: flex;
        justify-content: space-between;
        width: 40%;
        .duration {
          color: #8d8d8d;
        }
      }
    }
    .play-item {
      position: relative;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      .mask {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 50px;
        z-index: 10;
      }
      .right {
        display: flex;
        justify-content: space-between;
        width: 40%;
        .duration {
          color: #8d8d8d;
        }
      }
      &:hover {
        background-color: #f3f3f3;
      }
    }
  }
</style>
